import 'package:campus_vision/models/player/player_state.dart';
import 'package:campus_vision/models/player/player_count.dart';
import 'package:campus_vision/providers/multi_video_player_provider.dart';
import 'package:campus_vision/providers/video_player_count_provider.dart';
import 'package:campus_vision/providers/video_player_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PlaybackControlBar extends ConsumerStatefulWidget {
  const PlaybackControlBar({super.key});

  @override
  ConsumerState<PlaybackControlBar> createState() => _PlaybackControlBarState();
}

class _PlaybackControlBarState extends ConsumerState<PlaybackControlBar> {
  @override
  void initState() {
    super.initState();
  }

  void _togglePlayPause(bool pause) {
    final deviceId = ref.read(multiVideoPlayerProvider
        .select((state) => state.value?.currentDeviceId));
    final currentChannelIds = ref.read(multiVideoPlayerProvider
        .select((state) => state.value?.currentChannelIds));
    if (deviceId != null &&
        (currentChannelIds != null && currentChannelIds.isNotEmpty)) {
      for (var id in currentChannelIds) {
        final controller =
            ref.read(videoPlayerStateProvider(deviceId, id).notifier);
        if (pause) {
          controller.pause();
        } else {
          controller.play();
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black54,
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _playOrPauseButton(),
          _gridButton(),
        ],
      ),
    );
  }

  Widget _playOrPauseButton() {
    final deviceId = ref.watch(multiVideoPlayerProvider
        .select((state) => state.value?.currentDeviceId));
    final currentChannelIds = ref.watch(multiVideoPlayerProvider
        .select((state) => state.value?.currentChannelIds));
    bool isPlaying = false;
    if (deviceId != null &&
        (currentChannelIds != null && currentChannelIds.isNotEmpty)) {
      for (var id in currentChannelIds) {
        final channelPlayState = ref.watch(
            videoPlayerStateProvider(deviceId, id)
                .select((state) => state.playerState));
        if (channelPlayState == PlayerState.playing) {
          isPlaying = true;
        }
      }
    }

    // 播放/暂停
    return IconButton(
      icon: Icon(
        isPlaying ? Icons.pause : Icons.play_arrow,
        color: Colors.white,
        size: 28,
      ),
      onPressed: () {
        _togglePlayPause(isPlaying);
      },
    );
  }

  Widget _gridButton() {
    final visiblePlayMode = ref.watch(multiVideoPlayerProvider
            .select((state) => state.value?.visiblePlayerCount)) ??
        [PlayerCount.single];
    return // 窗格切换按钮 - 使用PopupMenuButton让用户选择窗口模式
        Row(
      children: [
        PopupMenuButton<PlayerCount>(
          icon: const Icon(Icons.grid_view, color: Colors.white, size: 24),
          iconSize: 24,
          color: Colors.black87,
          offset: const Offset(0, -10),
          itemBuilder: (BuildContext context) {
            return visiblePlayMode.map((e) {
              return PopupMenuItem<PlayerCount>(
                value: e,
                child: Text(
                  '${e.value}窗格',
                  style: const TextStyle(color: Colors.white),
                ),
              );
            }).toList();
          },
          onSelected: (PlayerCount mode) {
            final currentMode = ref.read(videoPlayerCountProvider);
            if (mode != currentMode) {
              ref
                  .read(videoPlayerCountProvider.notifier)
                  .selectPlayerCount(mode);
            }
          },
        ),
        // 显示当前窗格数量
        // Text(
        //   '${ref.watch(videoScreenStateNotifierProvider(widget.deviceId, ref.watch(authNotifierProvider).accessToken)).displayMode.value}窗格',
        //   style: const TextStyle(color: Colors.white),
        // ),
      ],
    );
  }
}
